<template>
  <view class="add-bank-container">
    <!-- 顶部导航栏 -->
    <u-navbar
      :title="title"
      left-icon="arrow-left"
      left-icon-color="#303133"
      bg-color="#ffffff"
      fixed
      placeholder
      @left-click="back"
    />

    <!-- 表单区域 -->
    <view class="form-container">
      <u-form
        :model="formData"
        ref="formRef"
        :rules="rules"
      >
        <!-- 银行卡号 -->
        <u-form-item label="" prop="cardNumber" label-width="0">
          <u-input
            v-model="formData.cardNumber"
            placeholder="请输入银行卡号"
            type="number"
            maxlength="19"
             border = "none"
          />
        </u-form-item>

        <!-- 银行名称 -->
        <u-form-item label="" prop="bankName" label-width="0">
          <u-input
            v-model="formData.bankName"
            placeholder="请输入银行名称"
             border = "none"
          />
        </u-form-item>

        <!-- 办理网点 -->
        <u-form-item label="" prop="branchName" label-width="0">
          <u-input
            v-model="formData.branchName"
            placeholder="请输入办理网点"
             border = "none"
          />
        </u-form-item>

        <!-- 预留手机号 -->
        <u-form-item label="" prop="phoneNumber" label-width="0">
          <u-input
            v-model="formData.phoneNumber"
            placeholder="请输入预留手机号"
            type="number"
            maxlength="11"
            border = "none"
          />
        </u-form-item>

        <!-- 户主姓名 -->
        <u-form-item label="" prop="ownerName" label-width="0" >
          <u-input
            v-model="formData.ownerName"
            placeholder="请输入户主姓名"
             border = "none"
          />
        </u-form-item>
      </u-form>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-button-container">
      <u-button type="primary" style="width: 80%;" @click="submitForm">提交</u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { save } from "@/api/bankCard.js";
// 设置页面标题
const title = ref("添加银行卡");

// 表单数据
const formData = reactive({
  cardNumber: '',
  bankName: '',
  branchName: '',
  phoneNumber: '',
  ownerName: ''
});

// 表单引用
const formRef = ref(null);

// 表单规则
const rules = {
    cardNumber: [
      { required: true, message: '请输入银行卡号', trigger: ['blur', 'submit'] },
      { pattern: /^\d{14,19}$/, message: '银行卡号格式不正确', trigger: 'blur' }
    ],
    bankName: [
      { required: true, message: '请输入银行名称', trigger: ['blur', 'submit'] }
    ],
    branchName: [
      { required: true, message: '请输入办理网点', trigger: ['blur', 'submit'] }
    ],
    phoneNumber: [
      { required: true, message: '请输入预留手机号', trigger: ['blur', 'submit'] },
      { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    ownerName: [
      { required: true, message: '请输入户主姓名', trigger: ['blur', 'submit'] },
      { pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '姓名格式不正确', trigger: 'blur' }
    ]
  };

// 提交表单
const submitForm = () => {
  formRef.value.validate()
    .then(() => {
      const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
      let param = {
        name: formData.bankName,
        number: formData.cardNumber,
        outlets: formData.branchName,
        holderName: formData.ownerName,
        phone: formData.phoneNumber,
        employeeId: userInfo.info.id
      }
      save(param).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 2000
          });
           back()
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          });
        }
      }).catch(() => {
        uni.showToast({
          title: '添加失败',
          icon: 'none',
          duration: 2000
        });
      }).finally(() => {

      })
    })
    .catch(errors => {
      // 表单验证失败
      console.log('表单验证失败：', errors);
    });
};

// 返回上一页
const back = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss" scoped>
.add-bank-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-top: 88rpx; // 为固定导航栏预留空间
}

// 表单容器样式
.form-container {
  // padding: 30rpx;
  margin: 30rpx 0;
  
  
}
.form-container  .u-form-item { 
  background-color: #ffffff;
  margin: 30rpx;
  padding: 10px 20px;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

// 提交按钮样式
.submit-button-container {
  padding: 30rpx;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

</style>